import React, {Component} from 'react';
import MyPreview from "../MyUIComponent/MyPreview/MyPreview";
import {axiosGetFunction} from "../MyConfig/AppConfig";

// 可以理解为一个页面，页面的内容是
class ReleasePage extends Component {

    state = {
        availableImgWorks: [],
        data: null
    }

    componentDidMount() {
        this.loadAvailableImgWork();
    }

    // 加载所有已经发布的组态的列表
    loadAvailableImgWork = () => {
        axiosGetFunction("/img_work/available", (received_data)=>{
            console.log("received_data", received_data)
            let { dataList } = received_data;
            this.setState({
                availableImgWorks: dataList,
            }, ()=>{
                if (dataList.length > 0){
                    this.loadImgWorkContent(dataList[0].img_work_id)
                }
            })
        })
    }

    // 加载某一个组态的 content
    loadImgWorkContent = (img_work_id, callback) => {
        axiosGetFunction("/img_work/get?img_work_id=" + String(img_work_id), (received_data)=>{
            this.setState({ data: JSON.parse(received_data.content) }, ()=>{
                if (callback) callback();
            })
        })
    }

    // 渲染函数
    render() {
        let {data, availableImgWorks} = this.state;
        if (!data){
            return <div>
                正在加载数据
            </div>
        }else {
            return (
                <div>
                    <MyPreview data={data} availableImgWorks={availableImgWorks} loadImgWorkContent={this.loadImgWorkContent}/>
                </div>
            );
        }
    }
}

export default ReleasePage;
